<!-- 头部 -->
<template>
  <div class="bottom-center">
    <h2 class="titleText u-m-b-10">报警概况</h2>
      <div class="region-echarts" v-if="pageflag" style="height: 98%">
        <Echart
          id="leftBottom"
          :options="regionOptions"
          class="left_bottom_inner"
          v-if="pageflag"
          ref="charts"
          style="height: 100%"
        />
      </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
     schooleId:{
       type:[String, Number],
       default:0
     }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 数值
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
    async getDataHandler(){
      let param = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/data_center/getStudentResortTotal', {params:param})
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
          this.getData(data.data)
        }
      } catch {
        console.log('error')
      }
    },
    getData(data) {
      let res = [{
            name:'未处理',
            value:data.no_handle
          },{
            name:'已处理',
            value:data.handle
          }]
      console.log(res,'=======data')
      if (res) {
        this.pageflag=true
        this.init(res,data.handle_rate);
      } else {
        this.pageflag = false;
      }
    },

    init(data,textVal) {
      
      let color = ["#68BBC4", "#5087EC"];
      this.regionOptions = {
        color: color,
        title: {
            text:textVal,
            subtext: '处理率',
            textStyle: {
             fontSize: 30,
             color: ['#fff']
            },
            subtextStyle:{
                color:'#1684fc',
                fontSize:18,
                align:'center'
            },
            x:'center',
            y:'center'
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: 'bottom',
          textStyle: {
              color: "#fff",
              fontSize: 14 
          }
        },
        series: [
          {
            hoverAnimation: false,
            type: "pie",
            center: ['50%', '50%'],
            radius: ["50%", "70%"],
            // bottom:'10',
            label: {
              normal: {
                color:'#ccc',
                formatter: function (params) {
                  if(params.name !== '') {
                        return  params.name + '\n' + '\n' +params.value;
                    }else {
                        return '';
                  }
                }
              },
            },
            data: data,
          },
        ],
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.bottom-center {
  width: 100%;
  height: 100%;
  .boxline {
    height: 100%;
  }
}
</style>
